<template>
  <div class="menu-setting" v-loading="loading">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="header-content">
        <div class="title-section">
          <h2>菜单设置</h2>
          <p class="page-desc">管理系统菜单结构，支持多级菜单配置</p>
        </div>
      </div>
    </div>

    <!-- 操作栏 -->
    <div class="operation-bar">
      <div class="left-actions">
        <el-button type="primary" @click="handleAdd" :icon="Plus" class="action-btn">
          <span>新增菜单</span>
        </el-button>
        <el-button @click="handleRefresh" :icon="Refresh" class="action-btn">
          <span>刷新</span>
        </el-button>
      </div>
      <div class="right-actions">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索菜单名称或路径"
          clearable
          style="width: 280px"
          @keyup.enter="handleSearch"
          @clear="handleSearch"
          class="search-input">
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </div>
    </div>

    <!-- 菜单表格 -->
    <div class="table-container">
      <el-table
        :data="filteredMenuList"
        row-key="id"
        :tree-props="{ children: 'children' }"
        border
        :expand-row-keys="expandedKeys"
        @expand-change="handleExpandChange"
        class="menu-table">
        <el-table-column prop="name" label="菜单名称" min-width="300" show-overflow-tooltip>
          <template #default="{ row }">
            <div class="menu-name-cell">
              <div class="menu-info">
                <span class="menu-name">{{ row.name }}</span>
                <div class="menu-meta" v-if="row.children && row.children.length > 0">
                  <el-tag size="small" type="info" class="sub-menu-count"> {{ row.children.length }}个子菜单 </el-tag>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="path" label="路由路径" min-width="150" show-overflow-tooltip />
        <el-table-column prop="component" label="组件名称" min-width="120" show-overflow-tooltip />
        <el-table-column prop="icon" label="图标" width="100" align="center">
          <template #default="{ row }">
            <div class="icon-cell">
              <el-icon v-if="row.icon" class="icon-display">
                <component :is="getIconComponent(row.icon)" />
              </el-icon>
              <span v-else class="no-icon">-</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="sortOrder" label="排序" width="100" align="center">
          <template #default="{ row }">
            <el-tag size="small" :type="getSortTagType(row.sortOrder)" class="sort-tag">
              {{ row.sortOrder }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="120" align="center">
          <template #default="{ row }">
            <el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small" class="status-tag">
              <el-icon v-if="row.status === 1"><CircleCheck /></el-icon>
              <el-icon v-else><CircleClose /></el-icon>
              {{ row.status === 1 ? "启用" : "禁用" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="380" align="center" fixed="right">
          <template #default="{ row }">
            <div class="action-buttons">
              <el-button type="primary" size="small" @click="handleEdit(row)" :icon="Edit" class="action-btn">
                编辑
              </el-button>
              <el-button type="success" size="small" @click="handleAddSub(row)" :icon="Plus" class="action-btn">
                子菜单
              </el-button>
              <el-button
                type="warning"
                size="small"
                @click="handleToggleStatus(row)"
                :icon="row.status === 1 ? Lock : Unlock"
                class="action-btn">
                {{ row.status === 1 ? "禁用" : "启用" }}
              </el-button>
              <el-button
                type="danger"
                size="small"
                @click="handleDelete(row)"
                :icon="Delete"
                :disabled="row.children && row.children.length > 0"
                class="action-btn">
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 菜单表单对话框 -->
    <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      width="700px"
      :close-on-click-modal="false"
      @close="handleDialogClose">
      <el-form :model="menuForm" :rules="menuFormRules" ref="menuFormRef" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="上级菜单" prop="parentId">
              <el-tree-select
                v-model="menuForm.parentId"
                :data="menuOptions"
                placeholder="请选择上级菜单"
                style="width: 100%"
                :disabled="isEdit && menuForm.children && menuForm.children.length > 0"
                clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单名称" prop="name">
              <el-input v-model="menuForm.name" placeholder="请输入菜单名称" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="路由路径" prop="path">
              <el-input v-model="menuForm.path" placeholder="请输入路由路径" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="组件名称" prop="component">
              <el-input v-model="menuForm.component" placeholder="请输入组件名称" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="图标" prop="icon">
              <el-select v-model="menuForm.icon" placeholder="请选择图标" style="width: 100%" clearable>
                <el-option label="Monitor" value="Monitor">
                  <div class="icon-option">
                    <el-icon><Monitor /></el-icon>
                    <span>Monitor</span>
                  </div>
                </el-option>
                <el-option label="User" value="User">
                  <div class="icon-option">
                    <el-icon><User /></el-icon>
                    <span>User</span>
                  </div>
                </el-option>
                <el-option label="UserFilled" value="UserFilled">
                  <div class="icon-option">
                    <el-icon><UserFilled /></el-icon>
                    <span>UserFilled</span>
                  </div>
                </el-option>
                <el-option label="List" value="List">
                  <div class="icon-option">
                    <el-icon><List /></el-icon>
                    <span>List</span>
                  </div>
                </el-option>
                <el-option label="Setting" value="Setting">
                  <div class="icon-option">
                    <el-icon><Setting /></el-icon>
                    <span>Setting</span>
                  </div>
                </el-option>
                <el-option label="Cpu" value="Cpu">
                  <div class="icon-option">
                    <el-icon><Cpu /></el-icon>
                    <span>Cpu</span>
                  </div>
                </el-option>
                <el-option label="Menu" value="Menu">
                  <div class="icon-option">
                    <el-icon><Menu /></el-icon>
                    <span>Menu</span>
                  </div>
                </el-option>
                <el-option label="Operation" value="Operation">
                  <div class="icon-option">
                    <el-icon><Operation /></el-icon>
                    <span>Operation</span>
                  </div>
                </el-option>
                <el-option label="Message" value="Message">
                  <div class="icon-option">
                    <el-icon><Message /></el-icon>
                    <span>Message</span>
                  </div>
                </el-option>
                <el-option label="Document" value="Document">
                  <div class="icon-option">
                    <el-icon><Document /></el-icon>
                    <span>Document</span>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序" prop="sortOrder">
              <el-input-number v-model="menuForm.sortOrder" :min="0" :max="999" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="状态" prop="status">
          <el-switch
            v-model="menuForm.status"
            :active-value="1"
            :inactive-value="0"
            active-text="启用"
            inactive-text="禁用"
            class="status-switch" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { http } from "@/api";
import {
  Monitor,
  User,
  UserFilled,
  List,
  Setting,
  Cpu,
  Menu,
  Operation,
  Message,
  Document,
  Plus,
  Edit,
  Delete,
  Expand,
  Refresh,
  Search,
  Fold,
  View,
  CircleCheck,
  CircleClose,
  Lock,
  Unlock,
} from "@element-plus/icons-vue";

// 菜单列表数据
const menuList = ref([]);
const expandedKeys = ref([]);
const isAllExpanded = ref(false);

// 搜索关键词
const searchKeyword = ref("");

// 加载状态
const loading = ref(false);
const submitLoading = ref(false);

// 对话框相关
const dialogVisible = ref(false);
const dialogTitle = ref("新增菜单");
const isEdit = ref(false);
const menuFormRef = ref(null);

const menuForm = reactive({
  id: null,
  parentId: 0,
  name: "",
  path: "",
  component: "",
  icon: "",
  sortOrder: 0,
  status: 1,
});

// 表单验证规则
const menuFormRules = {
  name: [
    { required: true, message: "请输入菜单名称", trigger: "blur" },
    { min: 2, max: 50, message: "菜单名称长度在 2 到 50 个字符", trigger: "blur" },
  ],
  sortOrder: [{ required: true, message: "请输入排序值", trigger: "blur" }],
};

// 图标映射
const iconMap = {
  Monitor: Monitor,
  User: User,
  UserFilled: UserFilled,
  List: List,
  Setting: Setting,
  Cpu: Cpu,
  Menu: Menu,
  Operation: Operation,
  Message: Message,
  Document: Document,
  View: View,
};

// 获取图标组件
const getIconComponent = (iconName) => {
  if (!iconName) return "div";
  return iconMap[iconName] || "div";
};

// 获取排序标签类型
const getSortTagType = (sortOrder) => {
  if (sortOrder <= 10) return "success";
  if (sortOrder <= 50) return "warning";
  return "info";
};

// 过滤后的菜单列表
const filteredMenuList = computed(() => {
  if (!searchKeyword.value) return menuList.value;

  const filterMenus = (menus) => {
    return menus
      .filter((menu) => {
        const match =
          menu.name.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
          menu.path.toLowerCase().includes(searchKeyword.value.toLowerCase());

        if (menu.children && menu.children.length > 0) {
          const filteredChildren = filterMenus([...menu.children]);
          if (filteredChildren.length > 0) {
            return { ...menu, children: filteredChildren };
          }
          return match;
        }

        return match;
      })
      .map((menu) => {
        if (menu.children && menu.children.length > 0) {
          return { ...menu, children: filterMenus([...menu.children]) };
        }
        return menu;
      });
  };

  return filterMenus([...menuList.value]);
});

// 菜单选项
const menuOptions = computed(() => {
  const options = [
    {
      value: 0,
      label: "顶级菜单",
    },
  ];

  const addMenuOptions = (menus, level = 0) => {
    menus.forEach((menu) => {
      const prefix = "　".repeat(level);
      options.push({
        value: menu.id,
        label: `${prefix}${menu.name}`,
      });

      if (menu.children && menu.children.length > 0) {
        addMenuOptions(menu.children, level + 1);
      }
    });
  };

  addMenuOptions(menuList.value);
  return options;
});

// 获取菜单数据
const fetchMenuList = async () => {
  loading.value = true;
  try {
    const res = await http.get("/api/menus/all");
    console.log("后端返回的菜单数据:", res.data);

    if (res.data && Array.isArray(res.data)) {
      menuList.value = res.data;
    } else {
      menuList.value = [];
    }

    console.log("处理后的菜单数据:", menuList.value);
  } catch (error) {
    ElMessage.error("获取菜单列表失败");
    console.error("获取菜单列表失败:", error);
    // 如果接口失败，使用空数组
    menuList.value = [];
  } finally {
    loading.value = false;
  }
};

// 展开/收起所有
const handleExpandAll = () => {
  if (isAllExpanded.value) {
    expandedKeys.value = [];
    isAllExpanded.value = false;
  } else {
    const getAllKeys = (menus) => {
      const keys = [];
      menus.forEach((menu) => {
        keys.push(menu.id);
        if (menu.children && menu.children.length > 0) {
          keys.push(...getAllKeys(menu.children));
        }
      });
      return keys;
    };
    expandedKeys.value = getAllKeys(menuList.value);
    isAllExpanded.value = true;
  }
};

// 收起所有
const handleCollapseAll = () => {
  expandedKeys.value = [];
  isAllExpanded.value = false;
};

// 刷新
const handleRefresh = () => {
  fetchMenuList();
  ElMessage.success("刷新成功");
};

// 搜索
const handleSearch = () => {
  // 搜索时自动展开所有节点
  if (searchKeyword.value) {
    const getAllKeys = (menus) => {
      const keys = [];
      menus.forEach((menu) => {
        keys.push(menu.id);
        if (menu.children && menu.children.length > 0) {
          keys.push(...getAllKeys(menu.children));
        }
      });
      return keys;
    };
    expandedKeys.value = getAllKeys(menuList.value);
  }
};

// 展开变化
const handleExpandChange = (row, expanded) => {
  console.log("展开变化:", row.name, expanded);
  if (expanded) {
    expandedKeys.value.push(row.id);
  } else {
    const index = expandedKeys.value.indexOf(row.id);
    if (index > -1) {
      expandedKeys.value.splice(index, 1);
    }
  }
  console.log("当前展开的键:", expandedKeys.value);
};

// 对话框关闭
const handleDialogClose = () => {
  menuFormRef.value?.resetFields();
};

onMounted(() => {
  fetchMenuList();
});

// 处理新增菜单
const handleAdd = () => {
  dialogTitle.value = "新增菜单";
  isEdit.value = false;
  Object.assign(menuForm, {
    id: null,
    parentId: 0,
    name: "",
    path: "",
    component: "",
    icon: "",
    sortOrder: 0,
    status: 1,
  });
  dialogVisible.value = true;
};

// 处理添加子菜单
const handleAddSub = (row) => {
  dialogTitle.value = "新增子菜单";
  isEdit.value = false;
  Object.assign(menuForm, {
    id: null,
    parentId: row.id,
    name: "",
    path: "",
    component: "",
    icon: "",
    sortOrder: 0,
    status: 1,
  });
  dialogVisible.value = true;
};

// 处理编辑菜单
const handleEdit = (row) => {
  dialogTitle.value = "编辑菜单";
  isEdit.value = true;
  Object.assign(menuForm, {
    id: row.id,
    parentId: row.parentId || 0,
    name: row.name,
    path: row.path,
    component: row.component,
    icon: row.icon,
    sortOrder: row.sortOrder,
    status: row.status,
  });
  dialogVisible.value = true;
};

// 处理删除菜单
const handleDelete = (row) => {
  if (row.children && row.children.length > 0) {
    ElMessage.warning("该菜单下有子菜单，请先删除子菜单");
    return;
  }

  ElMessageBox.confirm("确定要删除该菜单吗？", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    try {
      await http.delete(`/api/menus/${row.id}`);
      ElMessage.success("删除成功");
      fetchMenuList();
    } catch (error) {
      ElMessage.error("删除失败");
      console.error("删除菜单失败:", error);
    }
  });
};

// 处理状态切换
const handleToggleStatus = (row) => {
  const newStatus = row.status === 1 ? 0 : 1;
  const statusText = newStatus === 1 ? "启用" : "禁用";

  ElMessageBox.confirm(`确定要${statusText}该菜单吗？`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    try {
      await http.patch(`/api/menus/${row.id}/status?status=${newStatus}`);
      ElMessage.success(`${statusText}成功`);
      fetchMenuList();
    } catch (error) {
      ElMessage.error("状态更新失败");
      console.error("更新菜单状态失败:", error);
    }
  });
};

// 处理表单提交
const handleSubmit = async () => {
  try {
    await menuFormRef.value.validate();
    submitLoading.value = true;

    if (isEdit.value) {
      await http.put(`/api/menus/${menuForm.id}`, menuForm);
      ElMessage.success("更新成功");
    } else {
      await http.post("/api/menus", menuForm);
      ElMessage.success("添加成功");
    }

    dialogVisible.value = false;
    fetchMenuList();
  } catch (error) {
    if (error.message) {
      ElMessage.error(error.message);
    } else {
      ElMessage.error("提交失败");
    }
    console.error("提交菜单数据失败:", error);
  } finally {
    submitLoading.value = false;
  }
};

// 计算总菜单数
const totalMenuCount = computed(() => {
  return menuList.value.length;
});

// 计算已展开的菜单数
const expandedMenuCount = computed(() => {
  return expandedKeys.value.length;
});

onMounted(() => {
  fetchMenuList();
});
</script>

<style scoped>
.menu-setting {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin: 20px;
}

.page-header {
  padding: 24px 24px 0;
  border-bottom: 1px solid #f0f0f0;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.title-section {
  flex: 1;
}

.title-section h2 {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}

.page-desc {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.header-stats {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}

.operation-bar {
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fafafa;
  border-bottom: 1px solid #f0f0f0;
  flex-wrap: wrap;
  gap: 16px;
}

.left-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.right-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.table-container {
  padding: 0;
  overflow-x: auto;
}

.menu-table {
  border: none;
  min-width: 1000px;
}

.menu-table :deep(.el-table__header) {
  background-color: #fafafa;
}

.menu-table :deep(.el-table__row:hover) {
  background-color: #f5f7fa;
  transform: translateX(2px);
}

.menu-table :deep(.el-table__fixed-right) {
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
}

.menu-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.menu-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.menu-name {
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #303133;
}

.menu-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.sub-menu-count {
  margin-left: 0;
  flex-shrink: 0;
  font-size: 12px;
}

.path-tag {
  margin-left: 0;
  flex-shrink: 0;
  font-size: 12px;
}

.icon-display {
  font-size: 18px;
  color: #409eff;
}

.no-icon {
  color: #c0c4cc;
  font-size: 18px;
}

.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.action-buttons .el-button {
  margin: 0;
  flex-shrink: 0;
}

.action-btn {
  transition: all 0.3s ease;
}

.action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.icon-option {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dialog-footer {
  text-align: right;
}

/* 表格样式增强 */
.menu-table :deep(.el-table__row) {
  transition: all 0.3s ease;
}

.menu-table :deep(.el-table__row:hover) {
  background-color: #f5f7fa;
  transform: translateX(2px);
}

.menu-table :deep(.el-table__row--level-1) {
  background-color: #fafafa;
  border-left: 3px solid #409eff;
}

.menu-table :deep(.el-table__row--level-2) {
  background-color: #f5f7fa;
  border-left: 3px solid #67c23a;
}

.menu-table :deep(.el-table__row--level-3) {
  background-color: #f0f2f5;
  border-left: 3px solid #e6a23c;
}

/* 树形展开图标样式 */
.menu-table :deep(.el-table__expand-icon) {
  color: #409eff;
  font-size: 16px;
  transition: all 0.3s ease;
}

.menu-table :deep(.el-table__expand-icon:hover) {
  color: #67c23a;
  transform: scale(1.1);
}

.menu-table :deep(.el-table__expand-icon .el-table__expand-icon-inner) {
  transition: transform 0.3s ease;
}

.menu-table :deep(.el-table__expand-icon--expanded .el-table__expand-icon-inner) {
  transform: rotate(90deg);
}

/* 状态开关样式 */
.status-switch {
  --el-switch-on-color: #67c23a;
  --el-switch-off-color: #f56c6c;
}

/* 响应式优化 */
@media (max-width: 1200px) {
  .menu-setting {
    margin: 10px;
  }

  .operation-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .left-actions,
  .right-actions {
    justify-content: center;
  }

  .action-buttons {
    flex-direction: column;
    gap: 4px;
  }

  .action-buttons .el-button {
    width: 100%;
  }

  .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .header-stats {
    align-self: stretch;
    justify-content: space-around;
  }
}

@media (max-width: 768px) {
  .page-header {
    padding: 16px 16px 0;
  }

  .operation-bar {
    padding: 16px;
  }

  .left-actions,
  .right-actions {
    justify-content: center;
  }

  .action-buttons {
    flex-direction: column;
    gap: 4px;
  }

  .action-buttons .el-button {
    width: 100%;
  }

  .menu-table {
    min-width: 800px;
  }

  .menu-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* 表格滚动条样式 */
.table-container::-webkit-scrollbar {
  height: 8px;
}

.table-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.table-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.table-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 确保操作列始终可见 */
.menu-table :deep(.el-table__fixed-right) {
  z-index: 10;
}

.menu-table :deep(.el-table__fixed-right-patch) {
  background-color: #fafafa;
}

/* 树形表格样式 */
.menu-table :deep(.el-table__expand-icon) {
  color: #409eff;
  font-size: 14px;
}

.menu-table :deep(.el-table__expand-icon .el-table__expand-icon-inner) {
  transition: transform 0.3s ease;
}

.menu-table :deep(.el-table__expand-icon--expanded .el-table__expand-icon-inner) {
  transform: rotate(90deg);
}

.menu-table :deep(.el-table__indent) {
  padding-left: 0;
}

.menu-table :deep(.el-table__row) {
  transition: all 0.3s ease;
}

.menu-table :deep(.el-table__row:hover) {
  background-color: #f5f7fa;
}

/* 有子菜单的行样式 */
.menu-table :deep(.el-table__row--level-1) {
  background-color: #fafafa;
  border-left: 3px solid #409eff;
  font-weight: 500;
}

.menu-table :deep(.el-table__row--level-1:hover) {
  background-color: #f0f9ff;
  border-left-color: #67c23a;
}

/* 子菜单行样式 */
.menu-table :deep(.el-table__row--level-2) {
  background-color: #f5f7fa;
  border-left: 3px solid #67c23a;
}

.menu-table :deep(.el-table__row--level-2:hover) {
  background-color: #f0f9ff;
}

.menu-table :deep(.el-table__row--level-3) {
  background-color: #f0f2f5;
  border-left: 3px solid #e6a23c;
}

.menu-table :deep(.el-table__row--level-3:hover) {
  background-color: #fdf6ec;
}

/* 树形展开/收起动画 */
.menu-table :deep(.el-table__expand-transition) {
  transition: all 0.3s ease;
}

/* 树形表格基础样式 */
.menu-table :deep(.el-table__expand-icon) {
  color: #409eff;
  font-size: 16px;
}

.menu-table :deep(.el-table__expand-icon .el-table__expand-icon-inner) {
  transition: transform 0.3s ease;
}

.menu-table :deep(.el-table__expand-icon--expanded .el-table__expand-icon-inner) {
  transform: rotate(90deg);
}

.menu-table :deep(.el-table__row) {
  transition: background-color 0.3s ease;
}

.menu-table :deep(.el-table__row:hover) {
  background-color: #f5f7fa;
}

/* 确保子菜单标签在树形结构中正确显示 */
.menu-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding-left: 0;
}

.menu-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.menu-name {
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #303133;
}

.menu-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.sub-menu-count {
  margin-left: 0;
  flex-shrink: 0;
  font-size: 12px;
}

.icon-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-display {
  font-size: 18px;
  color: #409eff;
}

.no-icon {
  color: #c0c4cc;
  font-size: 18px;
}

.sort-tag {
  font-weight: 500;
}

.status-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}

.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.action-buttons .el-button {
  margin: 0;
  flex-shrink: 0;
}

.action-btn {
  transition: all 0.3s ease;
}

.action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>
